<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>inweo.utils.drag (window) test</title>
		<script src="../lib/mootools.js"></script>
		<script src="../inweo.js"></script>
		<style type="text/css">
			html, body {
				height: 1000px !important;
				background-color: white;
			}
			div.window {
				position: absolute;
				width: 300px;
				height: 100px;
				min-width: 30px;
				min-height: 30px;
				background-color: #cedbec;
				border: 1px solid none;
				border-color: transparent;
			}
			div.windowBar {
				cursor: move;
				position: relative;
				top: 0px;
				border-bottom: none;
				padding: 4px;
				padding-bottom: 8px;
				padding-left: 5px;
				background-image: url(images/windowTitle.png);
				background-repeat: repeat-x;
			}
			.windowTitle {
				color: #15428B;
				font-family: tahoma, arial, verdana, sans-serif;
				font-size: 11px;
				font-size-adjust: none;
				font-style: normal;
				font-variant: normal;
				font-weight: bold;
				line-height: normal;
				top: 0px;
				position: relative;
				overflow: hidden;
			}
			div.windowContent {
				border: 1px solid #a3bae9;
				margin: 0 4px 0 5px;
				background-color: #fff;
				height: 100%;
			}
			div.handler {
				position: absolute;
				height: 5px;
				width: 5px;
			}
			div.nResizer {
				cursor: n-resize;
				top: 0;
				width: 100%;
			}
			div.neResizer {
				cursor: ne-resize;
				z-index: 10;
				top: -1px;
				right: -9px;
				height: 6px;
				width: 10px;
				background: transparent url(images/neResizerShadow.png) no-repeat 0 0;
			}
			div.eResizer {
				cursor: e-resize;
				right: 0;
				top: 0;
				height: 100%;
				right: -7px;
				top: 5px;
				width: 7px;
				background: transparent url(images/eResizerShadow.png) repeat-y 0 0;
			}
			div.seResizer {
				cursor: se-resize;
				bottom: 0;
				z-index: 10;
				bottom: -5px;
				right: -6px;
				height: 8px;
				width: 8px;
				background: transparent url(images/seResizerShadow.png) no-repeat;
			}
			div.sResizer {
				cursor: s-resize;
				width: 100%;
				bottom: -5px;
				background: transparent url(images/sResizerShadow.png) repeat-x 0 0;
			}
			div.swResizer {
				cursor: sw-resize;
				z-index: 10;
				bottom: -6px;
				left: -5px;
				height: 8px;
				width: 8px;
				background: transparent url(images/swResizerShadow.png) no-repeat !important;
			}
			div.wResizer {
				cursor: w-resize;
				bottom: 0;
				height: 100%;
				left: -5px;
				top: 6px;
				width: 6px;
				background: transparent url(images/wResizerShadow.png) repeat-y 0 0 !important;
			}
			div.nwResizer {
				cursor: nw-resize;
				z-index: 10;
				top: -1px;
				left: -5px;
				width: 7px;
				height: 7px;
				background: transparent url(images/nwResizerShadow.png);
			}
		</style>
		<script type="text/javascript">
			function main() {
				inweo.require("drag", "utils");

				var w		= $$(".window")[0];
				var wb		= $$(".windowBar")[0];
				var wc		= $$(".windowContent")[0];
				var nR		= $$(".nResizer")[0];
				var neR		= $$(".neResizer")[0];
				var eR		= $$(".eResizer")[0];
				var seR		= $$(".seResizer")[0];
				var sR		= $$(".sResizer")[0];
				var swR		= $$(".swResizer")[0];
				var wR		= $$(".wResizer")[0];
				var nwR		= $$(".nwResizer")[0];

				var drag = new inweo.utils.drag(w);
				drag.onDragStart(function() {
					var self = this;
					drag.__cursor = inweo.getCSS(document.body, "cursor");
					var calcMinHeight = function() {
						drag.minHeight	= parseFloat(inweo.getCSS(self.element, "min-height"));
					}
					var calcMinWidth = function() {
						drag.minWidth	= parseFloat(inweo.getCSS(self.element, "min-width"));
					}
					if (this.__handler === wb) {
						document.body.style.cssText = "cursor: move !important";
					}
					if (this.__handler === neR) {
						calcMinHeight();
						document.body.style.cssText = "cursor: ne-resize !important";
					}
					if (this.__handler === nR) {
						calcMinHeight();
					}
					if (this.__handler === swR) {
						calcMinWidth();
					}
					if (this.__handler === wR) {
						calcMinWidth();
					}
					if (this.__handler === nwR) {
						calcMinHeight();
						calcMinWidth();
					}
				});
				drag.onBeforeDrag(function(x, y) {
					var self = this;
					var cancelOnNegativeValue = function(number, path) {
						if (number < 0) {
							self.cancel(path);
						}
					}
					var calcNewHeight = function() {
						var height		= parseFloat(self.element.style.height);
						drag.newHeight	= height + (y[0] - y[1]);
						if (drag.newHeight < drag.minHeight) {
							self.cancel(self.Y);
						}
					}
					var calcNewWidth = function() {
						var width		= parseFloat(self.element.style.width);
						drag.newWidth	= width + (x[0] - x[1]);
						if (drag.newWidth < drag.minWidth) {
							self.cancel(self.X);
						}
					}
					if (this.__handler === neR) {
						calcNewHeight();
						cancelOnNegativeValue(x[1]);
					}
					if (this.__handler === nR) {
						calcNewHeight();
					}
					if (this.__handler === swR) {
						calcNewWidth();
						cancelOnNegativeValue(y[1]);
					}
					if (this.__handler === wR) {
						calcNewWidth();
					}
					if (this.__handler === nwR) {
						calcNewHeight();
						calcNewWidth();
					}
					if (this.__handler === seR) {
						cancelOnNegativeValue(x[1]);
						cancelOnNegativeValue(y[1]);
					}
					if (this.__handler === eR) {
						cancelOnNegativeValue(x[1]);
						cancelOnNegativeValue(y[1]);
					}
					if (this.__handler === sR) {
						cancelOnNegativeValue(y[1]);
					}
				});
				drag.onDrag(function(x, y) {
					var self = this;
					var setHeight = function() {
						if (!isNaN(drag.newHeight)) {
							self.element.style.height = drag.newHeight + "px";
						}
					}
					var setWidth = function() {
						if (!isNaN(drag.newWidth)) {
							self.element.style.width = drag.newWidth + "px";
						}
					}
					if (this.__handler === neR) {
						setHeight();
					}
					if (this.__handler === nR) {
						setHeight();
					}
					if (this.__handler === swR) {
						setWidth();
					}
					if (this.__handler === wR) {
						setWidth();
					}
					if (this.__handler === nwR) {
						setWidth();
						setHeight();
					}
				});
				drag.onDrag(function() {
				//drag.onDragEnd(function() {
					__fixWindowContentHeight();
				});
				drag.onDragEnd(function() {
					document.body.style.cssText = "cursor: " + drag.__cursor;
				});

				var windowBar = new inweo.utils.drag.handler(drag, wb);

				var nResizer = new inweo.utils.drag.handler(drag, nR);
				nResizer.modify(null, "top");

				var neResizer = new inweo.utils.drag.handler(drag, neR);
				neResizer.modify("width", "top");

				var eResizer = new inweo.utils.drag.handler(drag, eR);
				eResizer.modify("width", null);

				var seResizer = new inweo.utils.drag.handler(drag, seR);
				seResizer.modify("width", "height");

				var sResizer = new inweo.utils.drag.handler(drag, sR);
				sResizer.modify(null, "height");

				var swResizer = new inweo.utils.drag.handler(drag, swR);
				swResizer.modify("left", "height");

				var wResizer = new inweo.utils.drag.handler(drag, wR);
				wResizer.modify("left", null);

				var nwResizer = new inweo.utils.drag.handler(drag, nwR);
				nwResizer.modify("left", "top");

				function __fixWindowContentHeight() {
					// window content
					var borderSize = parseFloat((parseFloat(w.offsetWidth) - parseFloat(wc.offsetWidth)) / 2);
					var newHeight = parseFloat(w.offsetHeight) - parseFloat(wb.offsetHeight) - borderSize - 2;
					wc.style.height = newHeight + "px";
					
					// eR
					var diff = parseFloat(inweo.getCSS(eR, "top")) - parseFloat(inweo.getCSS(wb, "top"));
					eR.style.height = parseFloat(w.offsetHeight) - diff + "px";
					wR.style.height = parseFloat(w.offsetHeight) - diff + "px";
				}
				__fixWindowContentHeight();
			}
		</script>
	</head>
	<body>
		<div class="window widgetUnselectable" id="d1">
			<div class="windowBar">
				<div class="windowTitle">
					Window!
				</div>
			</div>
			<div class="windowContent">
				
			</div>
			<div class="handler nResizer"></div>
			<div class="handler neResizer"></div>
			<div class="handler eResizer"></div>
			<div class="handler seResizer"></div>
			<div class="handler sResizer"></div>
			<div class="handler swResizer"></div>
			<div class="handler wResizer"></div>
			<div class="handler nwResizer"></div>
		</div>







	</body>
</html>